<!-- Licensed under a BSD license. See license.html for license -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<title>WebGL2 - Instanced Drawing (not!)</title>
<link type="text/css" href="resources/webgl-tutorials.css" rel="stylesheet" />
</head>
<body>
<div class="description">
  Not! Instanced Drawing
</div>
  <canvas id="canvas"></canvas>
</body>
<!--
for most samples webgl-utils only provides shader compiling/linking and
canvas resizing because why clutter the examples with code that's the same in every sample.
See https://webglfundamentals.org/webgl/lessons/webgl-boilerplate.html
and https://webglfundamentals.org/webgl/lessons/webgl-resizing-the-canvas.html
for webgl-utils, m3, m4, and webgl-lessons-ui.
-->
<script src="resources/webgl-utils.js"></script>
<script src="resources/m4.js"></script>
<script>
'use strict';

const vertexShaderSource = `#version 300 es
in vec4 a_position;
uniform mat4 matrix;

void main() {
  // Multiply the position by the matrix.
  gl_Position = matrix * a_position;
}
`;

const fragmentShaderSource = `#version 300 es
precision highp float;

uniform vec4 color;

out vec4 outColor;

void main() {
  outColor = color;
}
`;

function main() {
  // Get A WebGL context
  /** @type {HTMLCanvasElement} */
  const canvas = document.querySelector('#canvas');
  const gl = canvas.getContext('webgl2');
  if (!gl) {
    return;
  }

  // Use our boilerplate utils to compile the shaders and link into a program
  const program = webglUtils.createProgramFromSources(gl,
      [vertexShaderSource, fragmentShaderSource]);

  const positionLoc = gl.getAttribLocation(program, 'a_position');
  const colorLoc = gl.getUniformLocation(program, 'color');
  const matrixLoc = gl.getUniformLocation(program, 'matrix');

  // Create a vertex array object (attribute state)
  const vao = gl.createVertexArray();

  // and make it the one we're currently working with
  gl.bindVertexArray(vao);

  const positionBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
      -0.1,  0.4,
      -0.1, -0.4,
       0.1, -0.4,
      -0.1,  0.4,
       0.1, -0.4,
       0.1,  0.4,
      -0.4, -0.1,
       0.4, -0.1,
      -0.4,  0.1,
      -0.4,  0.1,
       0.4, -0.1,
       0.4,  0.1,
    ]), gl.STATIC_DRAW);
  const numVertices = 12;

  // setup the position attribute
  gl.enableVertexAttribArray(positionLoc);
  gl.vertexAttribPointer(
      positionLoc,  // location
      2,            // size (num values to pull from buffer per iteration)
      gl.FLOAT,     // type of data in buffer
      false,        // normalize
      0,            // stride (0 = compute from size and type above)
      0,            // offset in buffer
  );

  const numInstances = 5;
  const matrices = [
    m4.identity(),
    m4.identity(),
    m4.identity(),
    m4.identity(),
    m4.identity(),
  ];

  const colors = [
    [ 1, 0, 0, 1, ],  // red
    [ 0, 1, 0, 1, ],  // green
    [ 0, 0, 1, 1, ],  // blue
    [ 1, 0, 1, 1, ],  // magenta
    [ 0, 1, 1, 1, ],  // cyan
  ];

  function render(time) {
    time *= 0.001; // seconds

    webglUtils.resizeCanvasToDisplaySize(gl.canvas);

    // Tell WebGL how to convert from clip space to pixels
    gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);

    gl.useProgram(program);

    // setup all attributes
    gl.bindVertexArray(vao);

    matrices.forEach((mat, ndx) => {
      m4.translation(-0.5 + ndx * 0.25, 0, 0, mat);
      m4.zRotate(mat, time * (0.1 + 0.1 * ndx), mat);

      const color = colors[ndx];

      gl.uniform4fv(colorLoc, color);
      gl.uniformMatrix4fv(matrixLoc, false, mat);

      gl.drawArrays(
          gl.TRIANGLES,
          0,             // offset
          numVertices,   // num vertices per instance
      );
    });

    requestAnimationFrame(render);
  }
  requestAnimationFrame(render);
}

main();
</script>
</html>



